<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🌸专属AI陪伴 - 刘煜萱宝宝🌸</title>
    <style>
        body {
            font-family: 'Comic Sans MS', 'Marker Felt', 'Arial Rounded MT Bold', sans-serif;
            background-color: #fff0f5;
            color: #7a4b7a;
            margin: 0;
            padding: 0;
            background-image: linear-gradient(135deg, #fff0f5 0%, #ffe6ee 50%, #ffd6e7 100%);
        }
        .container {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            padding: 15px;
            box-sizing: border-box;
        }
        header {
            text-align: center;
            padding: 20px 0;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 20px;
            margin-bottom: 20px;
            box-shadow: 0 4px 15px rgba(255, 133, 162, 0.2);
            border: 2px solid #ffcce0;
        }
        
        .music-control {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: rgba(255, 255, 255, 0.9);
            padding: 10px;
            border-radius: 50%;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            cursor: pointer;
            z-index: 1000;
        }
        h1 {
            color: #ff6b9d;
            font-size: 2.5em;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 10px;
            background: linear-gradient(45deg, #ff6b9d, #ff8fab);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .subtitle {
            color: #c97ba5;
            font-size: 1.2em;
        }
        .ai-panel {
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 25px;
            padding: 25px;
            box-shadow: 0 8px 25px rgba(255, 133, 162, 0.25);
            border: 2px solid #ffd1e0;
        }
        .message-area {
            height: 60vh;
            max-height: 500px;
            overflow-y: auto;
            margin-bottom: 15px;
            border-bottom: 2px dashed #ffb6d1;
            padding-bottom: 15px;
            background-color: rgba(255, 240, 245, 0.7);
            border-radius: 15px;
            padding: 10px;
        }
        .input-area {
            display: flex;
            gap: 8px;
            margin-top: 15px;
            flex-wrap: wrap;
        }
        
        @media (max-width: 480px) {
            input, button {
                width: 100%;
            }
            
            .ai-panel {
                padding: 15px;
            }
            
            h1 {
                font-size: 1.8em;
            }
            
            .subtitle {
                font-size: 1em;
            }
        }
        input {
            flex: 1;
            padding: 12px 15px;
            border-radius: 50px;
            border: 2px solid #ffb6d1;
            font-size: 16px;
            outline: none;
            background-color: #fff9fb;
            color: #7a4b7a;
            transition: all 0.3s;
        }
        input:focus {
            border-color: #ff85b8;
            box-shadow: 0 0 10px rgba(255, 133, 184, 0.4);
        }
        input::placeholder {
            color: #d4a4c0;
        }
        button {
            padding: 12px 25px;
            border-radius: 50px;
            border: none;
            cursor: pointer;
            background: linear-gradient(135deg, #ff85b8, #ffa6cb);
            color: white;
            font-weight: bold;
            font-size: 16px;
            transition: all 0.3s;
            box-shadow: 0 4px 10px rgba(255, 133, 184, 0.3);
        }
        button:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(255, 133, 184, 0.4);
            background: linear-gradient(135deg, #ff6ba8, #ff85b8);
        }
        button:active {
            transform: translateY(1px);
        }
        .user-message, .ai-message {
            padding: 12px 18px;
            border-radius: 18px;
            margin-bottom: 10px;
            max-width: 80%;
            line-height: 1.5;
            position: relative;
            word-wrap: break-word;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        .user-message {
            background-color: #ffd6e7;
            color: #7a4b7a;
            margin-left: auto;
            border-bottom-right-radius: 5px;
        }
        .ai-message {
            background-color: #f0e6ff;
            color: #7a4b7a;
            margin-right: auto;
            border-bottom-left-radius: 5px;
        }
        .user-message::before, .ai-message::before {
            content: "";
            position: absolute;
            bottom: -10px;
            width: 20px;
            height: 20px;
            background-size: contain;
            background-repeat: no-repeat;
        }
        .user-message::before {
            right: 0;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ffd6e7"><path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2z"/></svg>');
        }
        .ai-message::before {
            left: 0;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23f0e6ff"><path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2z"/></svg>');
        }
        .header-icon {
            font-size: 2em;
            margin-bottom: 10px;
            color: #ff85b8;
        }
        /* 滚动条样式 */
        .message-area::-webkit-scrollbar {
            width: 8px;
        }
        .message-area::-webkit-scrollbar-track {
            background: #ffe6f0;
            border-radius: 10px;
        }
        .message-area::-webkit-scrollbar-thumb {
            background: #ffb6d1;
            border-radius: 10px;
        }
        .message-area::-webkit-scrollbar-thumb:hover {
            background: #ff85b8;
        }
        /* 打字动画 */
        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }
        @keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: #ff6b9d }
        }
        .typing {
            overflow: hidden;
            white-space: nowrap;
            animation: 
                typing 2s steps(40, end),
                blink-caret .75s step-end infinite;
            border-right: 2px solid #ff6b9d;
        }
        /* 爱心漂浮动画 */
        @keyframes float {
            0% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(10deg); }
            100% { transform: translateY(0) rotate(0deg); }
        }
        .floating-heart {
            position: absolute;
            font-size: 20px;
            color: #ff6b9d;
            animation: float 3s ease-in-out infinite;
            opacity: 0.6;
        }
    </style>
</head>
<body>
    <div id="floating-hearts"></div>
    
    <div class="container">
        <header>
            <div class="header-icon">🌸💕🌸</div>
            <h1>AI甜心陪伴</h1>
            <p class="subtitle">你的专属AI聊天伙伴</p>
        </header>
        
        <div class="ai-panel">
            <div class="message-area" id="chat-box">
                <!-- 聊天消息将在这里显示 -->
                <p class="ai-message typing">你好呀~我是你的AI聊天伙伴，很高兴认识你！💖</p>
            </div>
            
            <div class="input-area">
                <input type="text" id="user-input" placeholder="想和我说些什么呢...">
                <button id="send-btn">发送 💌</button>
            </div>
        </div>
    </div>

    <script>
        // 创建漂浮爱心
        function createFloatingHearts() {
            const container = document.getElementById('floating-hearts');
            const heartCount = 10;
            
            for (let i = 0; i < heartCount; i++) {
                const heart = document.createElement('div');
                heart.className = 'floating-heart';
                heart.innerHTML = '💖';
                heart.style.left = Math.random() * 100 + 'vw';
                heart.style.top = Math.random() * 100 + 'vh';
                heart.style.animationDelay = Math.random() * 3 + 's';
                heart.style.fontSize = (Math.random() * 15 + 15) + 'px';
                container.appendChild(heart);
            }
        }
        
        // 初始化AI陪伴功能
        document.getElementById('send-btn').addEventListener('click', sendMessage);
        document.getElementById('user-input').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });

        function sendMessage() {
            const userInput = document.getElementById('user-input').value;
            if (userInput.trim() === '') return;
            
            // 显示用户消息
            const chatBox = document.getElementById('chat-box');            
            const userMsg = document.createElement('p');
            userMsg.className = 'user-message';
            userMsg.textContent = userInput;
            chatBox.appendChild(userMsg);
            
            // 清空输入框
            document.getElementById('user-input').value = '';
            
            // 显示"正在输入"提示
            const typingIndicator = document.createElement('p');
            typingIndicator.className = 'ai-message';
            typingIndicator.textContent = '正在思考中... 🌸';
            typingIndicator.id = 'typing-indicator';
            chatBox.appendChild(typingIndicator);
            chatBox.scrollTop = chatBox.scrollHeight;
            
            // 调用真实AI回复
            getAIResponse(userInput).then(response => {
                // 移除"正在输入"提示
                const indicator = document.getElementById('typing-indicator');
                if (indicator) chatBox.removeChild(indicator);
                
                const aiMsg = document.createElement('p');
                aiMsg.className = 'ai-message';
                aiMsg.textContent = response;
                chatBox.appendChild(aiMsg);
                chatBox.scrollTop = chatBox.scrollHeight;
            });
        }

        // DeepSeek API调用逻辑
        async function getAIResponse(input) {
            const deepseek_api_key = 'sk-e48e5c701d1841239c968e5fbf28f4a6';
            
            // 判断问题类型
            const isPhilosophical = input.includes('?') || 
                                  input.includes('为什么') || 
                                  input.includes('如何') ||
                                  input.includes('意义');
            
            const payload = {
                model: 'deepseek-chat',
                messages: [
                    {
                        role: 'system',
                        content: isPhilosophical ? 
                            '你现在是一个可爱又智慧的哲学大师，需要用温暖、甜美而深刻的方式回答刘煜萱宝宝的哲理问题，适当使用花朵和爱心emoji表情，语气要像最亲密的朋友一样温柔' :
                            '你现在是一个超级温柔可爱的情感甜心，用最甜蜜可爱的语气回答刘煜萱宝宝的问题，要充满爱心和关怀，适当使用花朵和爱心emoji表情，语气要像最亲密的朋友一样温柔'
                    },
                    {
                        role: 'user',
                        content: input
                    }
                ],
                temperature: 0.7
            };

            try {
                const response = await fetch('https://api.deepseek.com/v1/chat/completions', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${deepseek_api_key}`
                    },
                    body: JSON.stringify(payload)
                });

                const data = await response.json();
                return data.choices[0].message.content;
            } catch (error) {
                console.error('Error calling DeepSeek API:', error);
                return "哎呀，我刚刚有点小走神~ 能再和我说一次吗？🌸🥺"
            }
        }
        
        // 页面加载完成后创建漂浮爱心
        window.addEventListener('load', createFloatingHearts);
    </script>
    <audio id="bgMusic" loop>
        <source src="music/background.mp3" type="audio/mp3">
    </audio>
    <div class="music-control" onclick="toggleMusic()">🎵</div>
    <script>
        const bgMusic = document.getElementById('bgMusic');
        
        function toggleMusic() {
            if (bgMusic.paused) {
                bgMusic.play();
                document.querySelector('.music-control').textContent = '🔊';
            } else {
                bgMusic.pause();
                document.querySelector('.music-control').textContent = '🎵';
            }
        }
    </script>
</body>
</html>